import {
  addTodo,
  TODOS_FEATURE_KEY,
  loadTodos,
  selectTodosList
} from './store/todos-slice'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'

function Todos () {
  const dispatch = useDispatch()
  // const todos = useSelector(state => state[TODOS_FEATURE_KEY])
  // const todos = useSelector(state => state[TODOS_FEATURE_KEY].entities)
  const todos = useSelector(selectTodosList)

  useEffect(() => {
    dispatch(loadTodos('https://jsonplaceholder.typicode.com/todos'))
  }, [])

  return (
    <div>
      <button
        onClick={() =>
          dispatch(addTodo({ title: '添加任务', id: Math.random() }))
        }
      >
        添加任务
      </button>

      <ul>
        {todos.map((todo, index) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  )
}

export default Todos
